<template>
	<div
		:style='{ "minHeight": "calc(100vh - 200px)", "padding": "10px 0 30px", "margin": "0 auto", "color": "#666", "background": "none", "width": "calc(100% - 20px)", "fontSize": "14px", "height": "100%" }'>
		<el-form
			:style='{ "border": "1px solid #ddd", "padding": "30px 0", "boxShadow": "inset 0px 0px 0px 0px #E8EFF7,0 0px 0px 0px rgba(100,100,100,.1)", "borderColor": "#ccc", "alignItems": "flex-start", "borderRadius": "0px", "flexWrap": "wrap", "background": "#eee", "borderWidth": "1px", "display": "flex", "fontSize": "inherit", "borderStyle": "solid" }'
			class="add-update-preview" ref="ruleForm" :rules="rules" :model="ruleForm" label-width="200px">
			<el-form-item
				:style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
				label="原密码" prop="password">
				<el-input v-model="ruleForm.password" show-password></el-input>
			</el-form-item>
			<el-form-item
				:style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
				label="新密码" prop="newpassword">
				<el-input v-model="ruleForm.newpassword" show-password></el-input>
			</el-form-item>
			<el-form-item
				:style='{ "padding": "0px 0", "margin": "0 auto 20px", "color": "inherit", "borderRadius": "4px", "background": "none", "width": "100%", "fontSize": "inherit" }'
				label="确认密码" prop="repassword">
				<el-input v-model="ruleForm.repassword" show-password></el-input>
			</el-form-item>
			<el-form-item
				:style='{ "padding": "0", "margin": "30px auto", "alignItems": "center", "textAlign": "center", "background": "none", "display": "flex", "width": "100%", "fontSize": "18px" }'>
				<el-button class="btn3"
					:style='{ "border": "0px solid #3fcbca", "cursor": "pointer", "padding": "0 10px", "margin": "0px 4px", "outline": "none", "color": "#fff", "borderRadius": "4px", "background": "#64ac56", "width": "auto", "fontSize": "14px", "lineHeight": "24px", "height": "24px" }'
					type="primary" @click="onUpdateHandler">
					<span class="icon iconfont icon-tijiao10"
						:style='{ "color": "inherit", "margin": "0 2px", "fontSize": "inherit" }'></span>
					确定
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
export default {
	data() {
		return {
			dialogVisible: false,
			ruleForm: {},
			user: {},
			rules: {
				password: [
					{
						required: true,
						message: "密码不能为空",
						trigger: "blur"
					}
				],
				newpassword: [
					{
						required: true,
						message: "新密码不能为空",
						trigger: "blur"
					}
				],
				repassword: [
					{
						required: true,
						message: "确认密码不能为空",
						trigger: "blur"
					}
				]
			}
		};
	},
	mounted() {
		this.$http({
			url: `${this.$storage.get("sessionTable")}/session`,
			method: "get"
		}).then(({ data }) => {
			if (data && data.code === 0) {
				this.user = data.data;
			} else {
				this.$message.error(data.msg);
			}
		});
	},
	methods: {
		onLogout() {
			this.$storage.remove("Token");
			this.$router.replace({ name: "login" });
		},
		// 修改密码
		async onUpdateHandler() {
			this.$refs["ruleForm"].validate(async valid => {
				if (valid) {
					var password = "";
					if (this.user.mima) {
						password = this.user.mima;
					} else if (this.user.password) {
						password = this.user.password;
					}
					if (this.$storage.get("sessionTable") == 'users') {
						if (this.ruleForm.password != password) {
							this.$message.error("原密码错误");
							return;
						}
						if (this.ruleForm.newpassword != this.ruleForm.repassword) {
							this.$message.error("两次密码输入不一致");
							return;
						}
						this.user.password = this.ruleForm.newpassword;
						this.user.mima = this.ruleForm.newpassword;
						this.$http({
							url: `${this.$storage.get("sessionTable")}/update`,
							method: "post",
							data: this.user
						}).then(({ data }) => {
							if (data && data.code === 0) {
								this.$message({
									message: "修改密码成功,下次登录系统生效",
									type: "success",
									duration: 1500,
									onClose: () => {
									}
								});
							} else {
								this.$message.error(data.msg);
							}
						});
						return false
					}
					if (this.ruleForm.password != password) {
						this.$message.error("原密码错误");
						return;
					}
					if (this.ruleForm.newpassword != this.ruleForm.repassword) {
						this.$message.error("两次密码输入不一致");
						return;
					}
					if (this.ruleForm.newpassword == this.ruleForm.password) {
						this.$message.error("新密码与原密码相同");
						return;
					}
					if (this.$storage.get("sessionTable") == 'yisheng') {
					}
					if (this.$storage.get("sessionTable") == 'yonghu') {
					}
					this.user.password = this.ruleForm.newpassword;
					this.user.mima = this.ruleForm.newpassword;
					this.$http({
						url: `${this.$storage.get("sessionTable")}/update`,
						method: "post",
						data: this.user
					}).then(({ data }) => {
						if (data && data.code === 0) {
							this.$message({
								message: "修改密码成功,下次登录系统生效",
								type: "success",
								duration: 1500,
								onClose: () => {
								}
							});
						} else {
							this.$message.error(data.msg);
						}
					});
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.el-date-editor.el-input {
	width: auto;
}

.add-update-preview .el-form-item ::v-deep .el-form-item__label {
	padding: 0 10px 0 0;
	color: inherit;
	background: none;
	font-weight: 600;
	display: inline-block;
	width: 200px;
	font-size: inherit;
	line-height: 40px;
	text-align: right;
}

.add-update-preview .el-form-item ::v-deep .el-form-item__content {
	margin-left: 200px;
}

.add-update-preview .el-input ::v-deep .el-input__inner {
	border-radius: 4px;
	padding: 0 10px;
	color: inherit;
	background: #f6f6f6;
	width: auto;
	font-size: 12px;
	border-color: #ccc;
	border-width: 1px;
	border-style: solid;
	min-width: 200px;
	height: 30px;
}

.add-update-preview .el-select ::v-deep .el-input__inner {
	border-radius: 4px;
	padding: 0 10px;
	color: inherit;
	background: #f6f6f6;
	width: auto;
	font-size: 12px;
	border-color: #ccc;
	border-width: 1px;
	border-style: solid;
	min-width: 200px;
	height: 30px;
}

.add-update-preview .el-date-editor ::v-deep .el-input__inner {
	border-radius: 4px;
	padding: 0 10px 0 30px;
	color: inherit;
	background: #f6f6f6;
	width: auto;
	font-size: 12px;
	border-color: #ccc;
	border-width: 1px;
	border-style: solid;
	min-width: 200px;
	height: 30px;
}

.add-update-preview ::v-deep .el-upload--picture-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	width: auto;
	height: auto;
	line-height: initial;
	vertical-align: middle;
}

.add-update-preview ::v-deep .el-upload-list .el-upload-list__item {
	border: 1px solid #ccc;
	cursor: pointer;
	border-radius: 4px;
	margin: 0 0 10px;
	color: #aaa;
	background: #f6f6f6;
	object-fit: cover;
	width: 150px;
	font-size: 24px;
	line-height: 60px;
	text-align: center;
	height: 60px;
}

.add-update-preview ::v-deep .el-upload .el-icon-plus {
	border: 1px solid #ccc;
	cursor: pointer;
	border-radius: 4px;
	margin: 0 0 10px;
	color: #aaa;
	background: #f6f6f6;
	object-fit: cover;
	width: 150px;
	font-size: 24px;
	line-height: 60px;
	text-align: center;
	height: 60px;
}

.add-update-preview .el-textarea ::v-deep .el-textarea__inner {
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 10px 10px;
	color: inherit;
	background: #f6f6f6;
	width: auto;
	font-size: 12px;
	min-height: 80px;
	min-width: 300px;
	height: auto;
}

.add-update-preview .btn3 {
	border: 0px solid #3fcbca;
	cursor: pointer;
	border-radius: 4px;
	padding: 0 10px;
	margin: 0px 4px;
	outline: none;
	color: #fff;
	background: #64ac56;
	width: auto;
	font-size: 14px;
	line-height: 24px;
	height: 24px;
}

.add-update-preview .btn3:hover {
	opacity: 0.8;
}
</style>
